import React from 'react'

import {Table} from 'antd'
import {WeaLocaleProvider, WeaTools} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
let Base64 = WeaTools.Base64;


export default class MoreContainerView extends React.Component{

    render(){
        const {data} = this.props.state
        const tabId = this.props.moreTabId
        const {items,setting,showFields,style}  = data
        for(let tabId in items){
            if(items.hasOwnProperty(tabId)){
                let showField = []
                let columns = []
                let setting = {}
                if(data.items && data.items[tabId] && data.items[tabId].setting.showField){
                    setting = data.items[tabId].setting
                    showField = data.items[tabId].setting.showField
                }
                columns.push({"dataIndex":'icon',"key":'icon',"width":'8px',"render": (text) => <img src={style.iconEsymbol} style={{'margin-bottom':'4px'}}/>})
                for(let i in showField){
                    if(showField.hasOwnProperty(i)){
                        for(let j in showFields){
                            if(showFields.hasOwnProperty(j)){
                                if(showField[i] == showFields[j].id){
                                    if(showFields[j].fieldColumn=='subject'){
                                        columns.push({"dataIndex":showFields[j].fieldColumn,title:showFields[j].name,"key":showFields[j].fieldColumn,"width":showFields[j].width,"render": (text) => {return  <div title={text.name} className="font" style={{cursor:'pointer','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}} onClick={()=>{window.open(text.link,'_blank')}} dangerouslySetInnerHTML={{__html:text.name}}></div>}})
                                    }else{
                                        columns.push({"dataIndex":showFields[j].fieldColumn,title:showFields[j].name,"key":showFields[j].fieldColumn,"width":showFields[j].width,"render": (text) => <div title={text}  className="font"  style={{'overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}}>{text}</div>})
                                    }

                                }
                            }

                        }
                    }

                }

                items[tabId].columns = columns
            }

        }
        let content = null
        let item
        if(items.length > 0 && items.find((element)=>(element.id == tabId))) {
            item = items.find((element)=>(element.id == tabId))
            content = <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@1bfdv3`}
                columns={item.columns}
                showHeader={true}
                pagination={{
                    showSizeChanger: true
                }}
                dataSource={item.data} />
        }

        return (
            <div className="custom-element-more">
                {content}
            </div>
        )
    }
}